<template>
  <div class="cont_right_s">
    <div class="contract_base_title">{{ t('keys.BasicInformation') }}</div>
    <div class="cont_right_title">
      <div class="cont_right_t_p">
        {{ t('keys.initiatorName') }}:<span>{{ formData.initiatorName }}</span>
      </div>
      <div class="cont_right_t_t">
        {{ t('keys.apply_request_time') }}:<span>{{ approvalRecordData.operateTime }}</span>
      </div>
    </div>
    <div class="contract_base_title">{{ t('keys.approvalRecord') }}</div>
    <div class="approval_record">
      <el-timeline v-for="(activity, index) in activitiesList" :key="index" v-if="activitiesList.length > 0">
        <template v-for="(item, index) in activity" :key="index" v-if="activity.length > 0">
          <el-timeline-item
            v-if="item.nodeType != 'routingNode'"
            size="large"
            placement="top"
            :icon="item.icon"
            :type="item.type"
            :color="item.color"
            :hollow="item?.hollow"
            :timestamp="item.activityName + (item.approveType ? ' - ' + item.approveTypeCn : '') || t('keys.Node_exception')"
          >
            <div class="timeline_card" v-if="item.nodeType == 'startNode' || item.nodeType == 'endNode'">
              <div class="timeline_title">
                <div class="timeline_title_l timeline_title_lb">
                  {{ item.assigneeNameList ? item.assigneeNameList.toString() : '' }}<span>{{ item.operateTime }}</span>
                </div>
              </div>
            </div>
            <template v-else>
              <!-- 已操作的  包含 已审批"ALREADY" 绿色字 -->
              <div class="time-line-card" v-if="item.operated?.length || item.operatedRed?.length">
                <template v-for="(v, i) in item.operated" :key="i">
                  <!-- 已操作的 -->
                  <div class="operated">
                    <div class="check-item">
                      <el-icon color="#48D000"><SuccessFilled /></el-icon>
                      <span class="name">{{ v.approvalName }}</span>
                      <span class="status">{{ v.approveActionCn }}</span>
                      <span class="time">{{ v.operateTime }}</span>
                    </div>
                    <div class="remark">
                      审批意见：
                      <span v-for="(a, b) in v.comment" :key="b">
                        {{ a }}
                      </span>
                    </div>
                  </div>
                </template>
                <!-- 已操作 驳回"REFUSE" 红色字 -->
                <template v-for="(v, i) in item.operatedRed" :key="i">
                  <!-- 已操作的 -->
                  <div class="operated">
                    <div class="check-item">
                      <el-icon color="#48D000"><SuccessFilled /></el-icon>
                      <span class="name">{{ v.approvalName }}</span>
                      <span class="status" style="color: var(--el-color-danger)">{{ v.approveActionCn }}</span>
                      <span class="time">{{ v.operateTime }}</span>
                    </div>
                    <div class="remark">
                      审批意见：
                      <span v-for="(a, b) in v.comment" :key="b">
                        {{ a }}
                      </span>
                    </div>
                  </div>
                </template>
              </div>
              <!-- 未操作的 包含 待审批PENDING 未审批DISCARD 前加签BEFORE_ADD_SIGN 后加签AFTER_ADD_SIGN 转交TRANSFER 灰色字 -->
              <div class="time-line-card" v-if="item.noOperated?.length">
                <div class="not-operated">
                  <i class="zcb zcbshijian" style="color:#999999"></i>
                  <template v-for="(v, i) in item.noOperated" :key="i">
                    <!-- 未操作的 -->
                    <span>{{ v.approvalName }}</span>
                    <em style="color:#999999" v-if="i === item.noOperated.length - 1">{{ v.approveActionCn }}</em>
                  </template>
                </div>
              </div>
              <!-- 特殊操作 包含  前加签BEFORE_ADD_SIGN 后加签AFTER_ADD_SIGN 转交TRANSFER 撤回REVOKE 终止审批 -->
              <template v-for="(v, i) in item.addSign" :key="i">
                <div class="time-line-card red">
                  <div class="item-line">
                    <el-icon color=""><WarningFilled /></el-icon>
                    <span class="name">{{ v.approvalName }}</span>
                    <span class="status">{{ v.approveActionCn }}</span>
                  </div>
                  <div class="remark">
                    审批意见：
                    <span v-for="(a, b) in v.comment" :key="b">
                      {{ a }}
                    </span>
                  </div>
                </div>
              </template>
            </template>
          </el-timeline-item>
        </template>
      </el-timeline>
      <el-empty :description="t('keys.table_empty_text')" v-else />
    </div>
    <el-button type="info" class="showbpmn" @click.stop="flowchartShow">{{ t('keys.flowChart') }}</el-button>
  </div>

  <div class="botm_btns" v-if="sourceType == 'toBeApproved' && approvalAction.length > 0">
    <!-- 小于两个按钮时 -->
    <template v-for="(item, index) in approvalAction" :key="index" v-if="approvalAction.length <= 2">
      <!-- 拒绝改为驳回 -->
      <el-button type="info" size="default" class="refuse" @click.stop="btnsClick(5)" v-if="item == 'REFUSE'">{{ t('keys.reject') }}</el-button>
      <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(6)" v-else-if="item == 'APPROVE'">{{
        t('keys.approval')
      }}</el-button>
      <!-- <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(0)" v-else-if="item == 'REJECT'">{{  t('keys.reject') }}</el-button> -->
      <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(1)" v-else-if="item == 'PRE_ADD_SIGN'">
        {{ t('keys.Front_endorsement') }}</el-button
      >
      <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(2)" v-else-if="item == 'AGREE_AND_ADD_SIGN'">{{
        t('keys.Post_endorsement')
      }}</el-button>
      <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(3)" v-else-if="item == 'TRANSFER'">{{
        t('keys.passed_on')
      }}</el-button>
      <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(4)" v-else-if="item == 'CC'">{{ t('keys.Cc') }}</el-button>
    </template>
    <!-- 大于两个按钮时 -->
    <template v-if="approvalAction.length > 2">
      <el-dropdown class="moreBtn">
        <span class="el-dropdown-link">
          ...
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <template v-for="(item, index) in approvalAction" :key="index">
              <template v-if="index >= 2">
                <!-- <el-dropdown-item @click.stop="btnsClick(0)" v-if="item == 'REJECT'">{{  t('keys.reject') }}</el-dropdown-item> -->
                <el-dropdown-item @click.stop="btnsClick(1)" v-if="item == 'PRE_ADD_SIGN'">{{ t('keys.Front_endorsement') }}</el-dropdown-item>
                <el-dropdown-item @click.stop="btnsClick(2)" v-else-if="item == 'AGREE_AND_ADD_SIGN'">{{
                  t('keys.Post_endorsement')
                }}</el-dropdown-item>
                <el-dropdown-item @click.stop="btnsClick(3)" v-else-if="item == 'TRANSFER'">{{ t('keys.passed_on') }}</el-dropdown-item>
                <!-- <el-dropdown-item @click.stop="btnsClick(4)" v-else-if="item == 'CC'">{{ t('keys.Cc') }}</el-dropdown-item> -->
                <!-- 拒绝改为驳回 -->
                <el-dropdown-item @click.stop="btnsClick(5)" v-else-if="item == 'REFUSE'">{{ t('keys.reject') }}</el-dropdown-item>
                <el-dropdown-item @click.stop="btnsClick(6)" v-else-if="item == 'APPROVE'">{{ t('keys.approval') }}</el-dropdown-item>
              </template>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <template v-for="(item, index) in approvalAction" :key="index">
        <div v-if="index < 2">
          <!-- <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(0)" v-if="item == 'REJECT'">{{  t('keys.reject') }}</el-button> -->
          <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(1)" v-if="item == 'PRE_ADD_SIGN'">{{
            t('keys.Front_endorsement')
          }}</el-button>
          <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(2)" v-else-if="item == 'AGREE_AND_ADD_SIGN'">{{
            t('keys.Post_endorsement')
          }}</el-button>
          <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(3)" v-else-if="item == 'TRANSFER'">{{
            t('keys.passed_on')
          }}</el-button>
          <!-- <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(4)" v-else-if="item == 'CC'">{{
              t('keys.Cc')
            }}</el-button> -->
          <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(6)" v-else-if="item == 'APPROVE'">{{
            t('keys.approval')
          }}</el-button>
          <!-- 拒绝改为驳回 -->
          <el-button type="info" size="default" class="refuse" @click.stop="btnsClick(5)" v-else-if="item == 'REFUSE'">{{
            t('keys.reject')
          }}</el-button>
        </div>
      </template>
    </template>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
const { t } = useI18n() // 中英文
const router = useRouter()
const route = useRoute()
const emit = defineEmits(['flowchartShow', 'btnsClick'])

const props = defineProps({
  formData: {
    type: Object,
    default: {}
  },
  approvalRecordData: {
    type: Object,
    default: {}
  },
  activities: {
    type: Object,
    default: {}
  },
  approvalAction: {
    type: Array,
    default: []
  }
})
const activitiesList = ref([])
const sourceType = ref(route.query.sourceType || '')
const approveComment = ref(t('keys.approve_comment'))
const cc_comment = ref(t('keys.cc_comment'))
const forData = () => {
  if (props.activities?.length > 0) {
    props.activities.forEach((activity) => {
      let arr = []
      activity.forEach((item, index) => {
        let json = { ...item, operated: [], operatedRed: [], noOperated: [], addSign: [] }
        console.log(json)
        if (item?.recordDetail?.length) {
          item?.recordDetail.forEach((v) => {
            // 已操作的  包含 已审批"ALREADY" 后加签AFTER_ADD_SIGN 转交TRANSFER 绿色字
            if (['ALREADY', 'AFTER_ADD_SIGN'].includes(v.approveAction)) {
              json['operated'].push(v)
            }
            // 已操作 驳回"REFUSE" 红色字
            if (['REFUSE'].includes(v.approveAction)) {
              json['operatedRed'].push(v)
            }
            // 未操作的 包含 待审批PENDING 未审批DISCARD 前加签BEFORE_ADD_SIGN 转交TRANSFER 灰色字
            if (['PENDING', 'DISCARD', 'BEFORE_ADD_SIGN', 'TRANSFER'].includes(v.approveAction)) {
              json['noOperated'].push(v)
            }
            // 特殊操作 包含  前加签BEFORE_ADD_SIGN 后加签AFTER_ADD_SIGN 转交TRANSFER 撤回REVOKE 终止审批
            if (['BEFORE_ADD_SIGN', 'AFTER_ADD_SIGN', 'TRANSFER', 'REVOKE'].includes(v.approveAction)) {
              json['addSign'].push(v)
            }
          })
        }
        arr.push(json)
      })
      activitiesList.value.push(arr)
    })
  }
}
const flowchartShow = () => {
  emit('flowchartShow', true)
}
const btnsClick = (num) => {
  emit('btnsClick', num)
}
watch(
  () => props.activities,
  (newVal, oldVal) => {
    console.log(newVal, 'newVal')
    forData()
  },
  { deep: true }
)
defineExpose({})
</script>
<style lang="scss" scope>
.cont_right_s {
  height: 100%;
  margin-bottom: -16px;
  margin-right: -16px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 16px 0 16px 16px;
  border-left: 1px var(--el-border-color) var(--el-border-style);
  position: relative;
  &::-webkit-scrollbar {
    height: 5px;
    width: 5px;
  }
  &::-webkit-scrollbar-corner {
    background: #204754;
  }
  &::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 2px;
  }
  .contract_base_title {
    font-weight: 550;
    margin-bottom: 16px;
  }
  .cont_right_title {
    width: 100%;
    margin-bottom: 24px;
    .cont_right_t_p,
    .cont_right_t_t {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 22px;
      span {
        margin-left: 10px;
        font-weight: none;
      }
    }
  }
  .approval_record {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 16px 0 22px;
    margin-left: -20px;
    position: relative;
    cursor: pointer;
    &::-webkit-scrollbar {
      height: 5px;
      width: 5px;
    }
    &::-webkit-scrollbar-corner {
      background: #204754;
    }
    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track {
      background: #fff;
      border-radius: 2px;
    }
    :deep(.el-timeline-item__timestamp.is-top) {
      font-size: 14px;
      font-weight: 550;
      color: #333;
    }
    .timeline_card {
      width: 308px;
      padding: 12px;
      background: #fafafa;
      margin-bottom: 8px;
    }
    .timeline_title {
      .timeline_title_l {
        font-weight: 400;
        color: #333333;
        line-height: 18px;
        font-size: 12px;
        margin-bottom: 8px;
        margin-top: 4px;
        span {
          color: #999999;
          margin-left: 8px;
        }
      }
      .timeline_title_lb {
        margin-bottom: 0;
      }
      .timeline_title_c {
        color: #666666;
        font-size: 12px;
        margin-bottom: 8px;
      }
      .timeline_title_cSuccess {
        color: #48d000;
      }
      .timeline_title_cError {
        color: red;
      }
      .timeline_title_r {
        width: 100%;
        color: #666666;
        line-height: 18px;
        font-size: 12px;
        word-wrap: break-word;
        display: flex;
        flex-direction: row;
        .timeline_title_r_ctitle {
          font-size: 12px;
          width: 20%;
        }
        .timeline_title_r_comm {
          word-wrap: break-word;
          width: 80%;
        }
      }
    }
  }
  .showbpmn {
    margin: 10px;
    margin-bottom: 100px;
    margin-left: 45px;
  }
  .time-line-card {
    padding: 12px;
    background: var(--zcb-form-value-bg-color);
    border-radius: 4px;
    &.red {
      background: var(--el-color-warning-light-9);
      margin-top: 8px;
      .item-line {
        display: flex;
        align-items: center;
        color: var(--el-color-warning);
        .name {
          font-size: var(--zcb-font-size);
          font-weight: bold;
          margin-left: 8px;
        }
        .status {
          margin-left: 8px;
        }
      }
      .remark {
        margin-top: 4px;
        margin-left: 22px;
        color: #999999;
        i {
          font-style: normal;
          color: var(--el-color-success);
          margin-left: 22px;
        }
      }
    }
    .operated {
      margin-bottom: 10px;
      .check-item {
        display: flex;
        align-items: center;
        span {
          font-size: var(--zcb-font-size);
          &.name {
            margin-left: 8px;
            font-weight: bold;
          }
          &.status {
            font-style: normal;
            color: var(--el-color-success);
            margin-left: 8px;
          }
          &.time {
            margin-left: 8px;
            color: #999999;
          }
        }
      }
      .remark {
        margin-top: 4px;
        margin-left: 22px;
        color: #999999;
        i {
          font-style: normal;
          color: var(--el-color-success);
          margin-left: 22px;
        }
      }
    }
    .not-operated {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .zcb {
        margin-right: 8px;
      }
      span {
        margin-right: 8px;

        color: #666666;
      }
      em {
        font-style: normal;
        color: var(--el-color-danger);
        margin-left: 8px;
        font-size: var(--zcb-font-size);
      }
    }
  }
}
.botm_btns {
  position: absolute;
  right: -16px;
  bottom: -32px;
  left: 1px;
  height: 64px;
  background: #fff;
  border-top: 1px var(--el-border-color) var(--el-border-style);
  border-left: 0px var(--el-border-color) var(--el-border-style);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  .refuse {
    margin-right: 12px;
  }
  .approval {
    margin-right: 12px;
  }
}
.moreBtn {
  margin-right: 12px;
}
</style>
